<template>
  <div class="photo-main" v-loading="listLoading">
    <div class="photo-list" :style="{'--thumb-color': theme }">
      <div 
        v-for="item in photoList" 
        :key="item.id"
        class="photo-list-item" 
        :class="isActive(item)" 
        @click="onChooseItem(item)"
      >
        <el-image :src="item.url" fit="cover" alt="图片" title="点击选择"></el-image>
      </div>
    </div>
    <!-- 分页 -->
    <pagination
      layout="total, prev, pager, next, jumper" 
      :total="photoTotal"
      :page.sync="page"
      :limit.sync="limit" 
      @pagination="getList"
    />
  </div>
</template>

<script>
import { photoCreate } from '@/api/photo'
import Pagination from '@/components/Pagination'
import { mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'PhotoMain',
  components: { Pagination },
  props: {
    // 分类切换
    photoGroupId: {
      type: Number,
      default: null
    },
    // 资源切换
    photoFrom: {
      type: Number,
      default: null
    },
    // 基础已选择的数量
    baseLength: { 
      type: Number,
      default: 0
    },
    // 最多可选择数量
    maxLength: {
      type: Number,
      default: 100
    }
  },
  computed: {
    ...mapGetters({
      chooseList: 'photoChooseList',
      photoList: 'photoList',
      photoTotal: 'photoTotal',
      uploadUrls: 'uploadUrls'
    }),
    theme() {
      return this.$store.state.settings.theme
    },
    // 已选择的数量
    currentLength() {
      return this.chooseList.length + this.baseLength
    },
  },
  watch: {
    photoGroupId() {
      this.page = 1
      this.getList()
    },
    photoFrom() {
      this.page = 1
      this.getList()
    },
    // 监听上传数组发生改变
    uploadUrls(urls) {
      if (Array.isArray(urls) && urls.length) {
        this.photoCreate(urls)
      }
    }
  },
  data() {
    return {
      page: 1,
      limit: 15,
      listLoading: false,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    async getList() {
      try {
        this.listLoading = true
        await this.getPhotoList({
          page: this.page,
          limit: this.limit,
          photo_group_id: this.photoGroupId,
          from: this.photoFrom,
        })
      } finally {
        this.listLoading = false
      }
    },
    // 添加图片
    async photoCreate(urls) {
      const { data } = await photoCreate({
        urls: urls.join(),
        photo_group_id: this.photoGroupId,
        from: this.photoFrom,
      })
      this.pushPhotoList(data)
      this.pushPhotoTotal(data.length)
    },
    // 选中样式
    isActive(item) {
      const index = this.chooseList.findIndex(v => v.id == item.id)
      return index >= 0 ? 'active' : ''
    },
    // 选择图片
    onChooseItem(item) {
      const index = this.chooseList.findIndex(v => v.id == item.id)
      if (index >= 0) {
        // 如果已经选择 取消选择
        this.removeChooseByIndex(index)
      } else {
        // 超出选中最大值
        if (this.currentLength >= this.maxLength) {
          return false
        }
        // 没有选择 进行选择
        this.pushChooseItem(item)
      }
    },
    ...mapMutations('photoGroupImage', {
      pushChooseItem: 'PUSH_CHOOSE_ITEM',
      removeChooseByIndex: 'REMOVE_CHOOSE_BY_INDEX',
      pushPhotoList: 'PUSH_PHOTO_LIST',
      pushPhotoTotal: 'PUSH_PHOTO_TOTAL',
    }),
    ...mapActions('photoGroupImage', {
      getPhotoList: 'getPhotoList'
    })
  },
}
</script>

<style lang="scss" scoped>
.photo-main {
  .photo-list {
    height: 330px;
    overflow: auto;
    &-item {
      box-sizing: border-box;
      cursor: pointer;
      position: relative;
      float: left;
      width: 100px;
      height: 100px;
      margin: 0 10px 10px 0;
      border: 1px solid #fff;
      border-radius: 6px;
      overflow: hidden;
      &:nth-child(5n) {
        margin-right: 0;
      }
      &:hover {
        border-color: var(--thumb-color);
      }
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
    &-item.active {
      border-color: var(--thumb-color);
      &::before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        border: 18px solid var(--thumb-color);
        border-top-color: transparent;
        border-left-color: transparent;
        z-index: 1;
      }
      &::after {
        content: '';
        width: 8px;
        height: 18px;
        position: absolute;
        right: 7px;
        bottom: 5px;
        border: 2px solid #fff;
        border-top-color: transparent;
        border-left-color: transparent;
        transform: rotate(45deg);
        z-index: 2;
      }
    }
  }
  .pagination-container {
    padding: 16px 0 0 0;
    text-align: right;
  }
}
</style>